<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link href="__CSS__/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
	<link href="__CSS__/reset.css" rel="stylesheet">
	<link href="__CSS__/animate.min.css" rel="stylesheet">
	<link rel="stylesheet" href="__JS__/plugins/elementui/element-ui/lib/theme-chalk/index.css">
	<style type="text/css">
		body, html,#allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin:0;
			padding:0;
			font-family:"微软雅黑";
		}
		ul {
			margin: 0;padding: 15px;
			list-style: none;
			background: #FFF;
			border:2px solid #e7eaec;
			border-radius: 15px;
			color: #A62;
			font-size: 16px;
		}
		ul li {
			line-height: 32px;
		}
		.BMap_cpyCtrl.BMap_noprint.anchorBL{
			display: none;
		}
		div.anchorBL>a>img{
			display: none;
		}
		.map.map-p0 {
			background: url("/static/admin/images/map/p1.png") no-repeat;
			width: 20px;
			height: 25px;
			float: left;
			position: relative;
			top: 2px;
		}
		.map-icon {
			width: 20px;
			height: 25px;
			float: left;
			position: relative;
			top: 2px;
		}
		.map-p1 {
			background: url("/static/admin/images/map/p1.png") no-repeat;
		}
		.map-p2 {
			background: url("/static/admin/images/map/p2.png") no-repeat;
		}
		.map-p3 {
			background: url("/static/admin/images/map/p3.png") no-repeat;
		}
		.map-p4 {
			background: url("/static/admin/images/map/p4.png") no-repeat;
		}
		.map-p5 {
			background: url("/static/admin/images/map/p5.png") no-repeat;
		}
	</style>
	<script type="text/javascript" src="{$cfg.url}?v={$cfg.version}&ak={$cfg.ak}"></script>
	<title>设置点的新图标</title>
</head>
<body>
	<div id="allmap"></div>
	<div id="myControl" style="display: none;">
		<ul>
			<li><i class="map-icon map-p1"></i>建档立卡贫困村</li>
			<li><i class="map-icon map-p2"></i>公共服务体系</li>
			<li><i class="map-icon map-p3"></i>物流配送体系</li>
			<li><i class="map-icon map-p4"></i>农产品上行体系</li>
			<li><i class="map-icon map-p5"></i>培训体系</li>
		</ul>
	</div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.404, 39.915);
	map.centerAndZoom('大理市', 13);
	// 定义一个控件类,即function
	function ZoomControl(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
	  this.defaultOffset = new BMap.Size(10, 10);
	}

	// 通过JavaScript的prototype属性继承于BMap.Control
	ZoomControl.prototype = new BMap.Control();
	ZoomControl.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var div = document.createElement("div");
	  var oMyControl = document.getElementById('myControl');
	  // 设置样式
	  div.innerHTML = oMyControl.innerHTML;
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(div);
	  // 将DOM元素返回
	  return div;
	}
	// 创建控件
	var myZoomCtrl = new ZoomControl();
	// 添加到地图当中
	map.addControl(myZoomCtrl);

	//创建自定义覆盖物
	map.addOverlay(
		new BMap.Marker(new BMap.Point(100.236,25.596),
		{icon:new BMap.Icon("/static/admin/images/map/p2.png", new BMap.Size(20,25))}
	));
	map.addOverlay(
		new BMap.Marker(new BMap.Point(100.266,25.596),
		{icon:new BMap.Icon("/static/admin/images/map/p3.png", new BMap.Size(20,25))}
	));
</script>
